<template>
	<!-- #ifdef APP-NVUE -->
	<cell>
		<!-- #endif -->
		<view class="list-item xbd-list" @click="clickList(info._id)">
			<image class="avatar" :src="info.visitor_avatar | imgFormat" mode=""></image>
			<view class="list-info">
				<view class="row">
					<view class="title">
						来访人
					</view>
					<view class="info">
						{{ info.visitor_name }}
					</view>
				</view>
				<view class="row">
					<view class="title">
						来访事由
					</view>
					<view class="info">
						{{ info.visitor_reason || '-' }}
					</view>
				</view>
				<view class="row">
					<view class="title">
						来访时间
					</view>
					<view class="info" style="color: #999999;">
						{{ info.visitor_start_time | timeFormat('YYYY-MM-DD HH:mm') }}
					</view>
				</view>
			</view>
			<image class="state" v-if="info.visitor_status === 'wait'" src="@/static/images/meal/stay.svg" mode=""></image>
			<image class="state" v-else-if="info.visitor_status === 'passed'" src="@/static/images/meal/yes.svg" mode=""></image>
			<image class="state" v-else-if="info.visitor_status === 'refused'" src="@/static/images/meal/no.svg" mode=""></image>
			<image class="state" v-else-if="info.visitor_status === 'pending'" src="@/static/images/meal/underway.png" mode=""></image>
		</view>
		<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
</template>

<script>
	export default {
		name: 'XbdList',
		props: {
			info: Object
		},
		computed: {
			statusSrc() {
				if (this.info.visitor_status === 'pending') {
					return require('@/static/images/meal/stay.svg');
				} else if (this.info.visitor_status === 'passed') {
					return require('@/static/images/meal/yes.svg');
				} else if (this.info.visitor_status === 'refused') {
					return require('@/static/images/meal/no.svg');
				}
			}
		},
		methods: {
			clickList(id) {
				this.$emit('clickList', id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-item {
		margin-top: 20rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 50rpx;
		
		background-color: #FFFFFF;
		.avatar {
			width: 100rpx;
			height: 100rpx;
			
			border-radius: 50%;
		}
		.list-info {
			flex: 1;
			margin-left:40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			
			// width: 334rpx;
			.row {
				display: flex;
				margin-bottom: 10px;
				
				font-size: 12px;
				&:last-child {
					margin-bottom: 0;
				}
				.title {
					width: 50px;
					text-align: left;
					margin-right: 30rpx;
					
					color: #999999;
				}
				.info {
					width: 350rpx;
					text-align: left;
					overflow: hidden;/*超出部分隐藏*/
					text-overflow:ellipsis;/* 超出部分显示省略号 */
					white-space: nowrap;/*规定段落中的文本不进行换行 */
					
					color: $uni-text-color;
				}
			}
		}
		.state {
			position: absolute;
			top: 12px;
			right: 64rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>
